﻿@using ZhongKeSite.Entity;
@model List<News>

<div class="banner banner-contact wow fadeInUp">
    <div class="container">
        <h1 class="title-page">故事</h1>
        <p class="des">与我们一起分享未来农业更多精彩</p>
    </div>
</div>
<div class="page page-news page-story">
    <section class="container">
        <div class="newslist">
            <div class="row masonry" data-target=".item" data-col-xs="12" data-col-sm="6" data-col-md="4" data-col-lg="4" data-col-xl="3" data-col-xxl="2.4">
                @foreach (News item in Model)
                {
                    <div class="col">
                        <div class="item wow fadeInUp">
                            <a href="/detail?id=@item.ID"><img src="@item.CoverImage" alt=""></a>
                            <div class="txt">
                                <h3 class="title"> <a href="/detail?id=@item.ID">@item.Title</a></h3>
                                <a class="share" href="#"><i class="iconfont iconshare"> </i>分享</a>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </section>
</div>
<section class="subscribe">
    @{Html.RenderPartial("UcSubscribe");}
</section>
@section scripts {
    <script src="~/portal/js/vendor/masonry/js/bootstrap4.masonry.min.js"></script>
    <script>
        $(function () {
            var $masonry = $('.masonry').masonry();

            $('.js-ajax').on('click', function () {
                var data = $('.masonry').html();

                // $masonry.push($(data).find('.item'));
                $(data).find('.item').each(function () {
                    $masonry.push($(this));
                });
            });
        })
    </script>
}